<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Spin 旋转提示"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-spin
        size="30px"
        color="red"
        class="item"
      />
      <hips-spin class="item" />
    </demo-block>

    <demo-block title="使用svg">
      <hips-spin
        :svg-src="svg"
        size="60px"
      />
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Spin } from '@hips/vue-ui';

import Svg from '@/assets/rolling.svg';

export default {
  components: {
    [Spin.name]: Spin,
  },
  mixins: [ BasicView ],
  data() {
    return {
      svg: Svg,
    };
  },
};
</script>

<style scoped lang="stylus">
.item{
    margin-left: 20px;
    margin-bottom: 20px;
    display: block;
  }
</style>
